<template>
  <div class="login">
    <div class="login-left">
      <div class="login-left-logo">
        <img src="../static/login/logo@2x.png" alt="" />
      </div>
      <div class="login-left-main">
        <div class="login-left-main-title">
          <text>登录到</text>
          <text>启点优聘工作台</text>
        </div>
        <div class="login-left-main-msg">
          <text>没有账号吗 ？ </text>
          <span @click="toRegister()"> 注册新账号</span>
        </div>
        <div class="login-left-main-input">
          <el-input
            v-model="userForm.username"
            type="text"
            class="username"
            placeholder="请输入账号"
          >
          </el-input>
          <el-input
            v-model="userForm.password"
            type="password"
            class="password"
            placeholder="请输入登录密码"
          ></el-input>
          <div class="login-left-main-input-control">
            <div class="login-left-main-input-control-rem">
              <input type="checkbox" />
              <text>记住密码</text>
            </div>
            <div class="login-left-main-input-control-for">忘记密码？</div>
          </div>
        </div>
        <div class="login-left-main-btn">
          <el-button plain @click="toUsers()">继续</el-button>
        </div>
        <div class="login-left-main-way">
          <text>使用微信扫码登录 </text>
          <span class="login-left-main-way-line">|</span>
          <text> 使用短信登录</text>
        </div>
      </div>

      <div class="login-left-footer">
        Copyright @ 2021-2022 QiDianyoupin. All Rights Reserved
      </div>
    </div>
    <div class="login-right">
      <div class="login-right-top">
        <img src="../static/login/logbg1@2x.png" alt="" />
      </div>
      <div class="login-right-bottom">
        <img src="../static/login/logbg2@2x.png" alt="" />
      </div>
      <div class="login-right-title">创造未来</div>
      <div class="login-right-msg">启点优聘为老师与学生创作更好的教育方式</div>
    </div>
  </div>
</template>

<script>
// import { Vue } from 'vue-class-component';
import { reactive } from 'vue';
export default {
  data() {
    let userForm = reactive({ username: '', password: '' });
    return {
      userForm,
      current: 0,
    };
  },
  methods: {
    toRegister() {
      this.$router.push({ path: '/register' });
    },
    toUsers() {
      this.$router.push({ path: '/user' });
    },
  },
};
// export default class Login extends Vue {}
</script>

<style lang="less" scoped>
.login {
  display: flex;
}
&.login-left {
  width: 50%;

  & .login-left-logo {
    margin-top: 19px;
    margin-left: 16px;
    & img {
      width: 131px;
      height: 26.4px;
    }
  }
}
.login-left-main {
  width: 400px;
  height: 470px;
  margin-left: 80px;
  margin-top: 144px;
  & .login-left-main-title {
    width: 252px;
    height: 92px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.9);
    font-size: 36px;
    font-weight: 700;
    font-family: 'PingFang SC';
    line-height: 44px;
  }
  & .login-left-main-msg {
    display: flex;
    margin-top: 24px;
    & text {
      width: 95px;
      height: 22px;
      color: rgba(0, 0, 0, 0.6);
    }
    & span {
      width: 80px;
      height: 22px;
      color: rgba(0, 0, 0, 0.9);
    }
  }
  & .login-left-main-input {
    width: 400px;
    height: 150px;
    margin-top: 24px;
    & .username {
      margin-top: 24px;
      &::v-deep {
        .el-input__inner {
          width: 100%;
          height: 40px;
          background: url('../static/login/user@2x.png') no-repeat 0px center;
          padding-left: 40px;
        }
      }
    }
    & .password {
      margin-top: 24px;
      &::v-deep {
        .el-input__inner {
          width: 100%;
          height: 40px;
          background: url('../static/login/lock-on@2x.png') no-repeat 0px center;
          padding-left: 40px;
        }
      }
    }
    & .login-left-main-input-control {
      margin-top: 24px;
      width: 400px;
      height: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & .login-left-main-input-control-rem {
        width: 80px;
        height: 22px;
        display: flex;
        align-items: center;
        & input {
          width: 16px;
          height: 16px;
        }
        & .text {
          margin-left: 4px;
          font-size: 14px;
        }
      }
      & .login-left-main-input-control-for {
        color: rgba(22, 93, 255, 1);
        font-size: 14px;
      }
    }
  }
  & .login-left-main-btn {
    margin-top: 48px;
    & ::v-deep {
      .el-button {
        width: 400px;
        height: 40px;
        background-color: rgba(22, 93, 255, 1);
        border-radius: 3px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
      }
    }
  }
}
.login-left-main-way {
  margin-top: 24px;
  color: rgba(22, 93, 255, 1);
  font-size: 14px;
  & .login-left-main-way-line {
    margin-left: 8px;
    margin-right: 8px;
    width: 3px;
    color: rgba(0, 0, 0, 0.26);
  }
}
.login-left-footer {
  height: 22px;
  margin-top: 100px;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  margin-left: 80px;
}
.login-right {
  width: 50%;
  background: rgba(22, 93, 255, 1);
  position: relative;
  & .login-right-top {
    float: right;
    & img {
      width: 714px;
      height: 329px;
    }
  }
  & .login-right-bottom {
    float: right;
    margin-right: 60px;
    margin-bottom: 68.4px;
    & img {
      width: 580px;
      height: 475.6px;
    }
  }
  & .login-right-title {
    color: rgba(255, 255, 255, 1);
    font-size: 64px;
    font-weight: 700;
    position: absolute;
    left: 226px;
    top: 129px;
  }
  & .login-right-msg {
    color: rgba(255, 255, 255, 1);
    font-size: 24px;
    position: absolute;
    left: 126px;
    top: 231px;
  }
}
</style>
